<template>
  <baseCard title="应用监控总览"
            :height="height">
    <div class="template">
      <div class="template-item"
           v-for="(item, index) in option"
           :key="index">
        <div class="name">{{ item.name }}</div>
        <div class="value"
             :class="item.valueClass">
          {{ addThousandsSeparator(totalData[item.props]) }}
        </div>
      </div>
    </div>
  </baseCard>
</template>

<script setup>
import { ref } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  height: { type: String, default: "" },
  totalData: { type: Object, default: () => ({}) },
});

const option = ref([
  { props: "app_sum", name: "应用总数" },
  { props: "app_num_warning", name: "告警应用数", valueClass: "is-danger" },
  { props: "app_num_info", name: "提示应用数", valueClass: "is-warn" },
  { props: "app_num_normal", name: "正常运行应用数", valueClass: "is-success" },
]);
</script>

<style lang="less" scoped>
.template {
  display: flex;

  .template-item {
    width: 1.97rem;
    height: 0.43rem;
    padding: 0.2rem;
    margin-right: 0.16rem;
    color: #151A24;
    font-size: 0.16rem;
   // background: #1470cc1a;
    border: 0.01rem solid #e6ebf5;
    .value {
      margin-top: 0.1rem;
    }
  }
  .template-item:last-child {
    margin-right: 0;
  }
}
</style>